import { ActionType, PageContainer, ProColumns, ProTable } from "@ant-design/pro-components";
import { FormattedMessage, history, useAccess, useIntl, useParams } from "@umijs/max";
import type { FormInstance } from "antd";
import { Button } from "antd";
import React, { useRef, useState } from "react";

export type DictTypeArgs = {
	id: string;
};

const DictDataTableList: React.FC = () => {
	const formTableRef = useRef<FormInstance>();

	const [dictId, setDictId] = useState<string>("");
	const [dictType, setDictType] = useState<string>("");

	const [modalVisible, setModalVisible] = useState<boolean>(false);

	const actionRef = useRef<ActionType>();
	// const [currentRow, setCurrentRow] = useState<API.System.DictData>();
	const [selectedRows, setSelectedRows] = useState<API.System.DictData[]>([]);

	const [dictTypeOptions, setDictTypeOptions] = useState<any>([]);
	const [statusOptions, setStatusOptions] = useState<any>([]);

	const access = useAccess();

	/** 国际化配置 */
	const intl = useIntl();

	const params = useParams();
	if (params.id === undefined) {
		history.push("/system/dict");
	}
	const id = params.id || "0";

	// useEffect(() => {
	//   if (dictId !== id) {
	//     setDictId(id);
	//     getDictTypeOptionSelect().then((res) => {
	//       if (res.code === 200) {
	//         const opts: any = {};
	//         res.data.forEach((item: any) => {
	//           opts[item.dictType] = item.dictName;
	//         });
	//         setDictTypeOptions(opts);
	//       }
	//     });
	//     getDictValueEnum('sys_normal_disable').then((data) => {
	//       setStatusOptions(data);
	//     });
	//     getDictType(id).then((res) => {
	//       if (res.code === 200) {
	//         setDictType(res.data.dictType);
	//         formTableRef.current?.setFieldsValue({
	//           dictType: res.data.dictType,
	//         });
	//         actionRef.current?.reloadAndRest?.();
	//       } else {
	//         message.error(res.msg);
	//       }
	//     });
	//   }
	// }, [dictId, dictType, params]);

	const columns: ProColumns<API.System.DictDataVo>[] = [
		{
			title: <FormattedMessage id="system.dict.data.dict_code" defaultMessage="字典编码" />,
			dataIndex: "id",
			valueType: "text",
			hideInSearch: true
		},
		{
			title: <FormattedMessage id="system.dict.data.dict_label" defaultMessage="字典标签" />,
			dataIndex: "dictLabel",
			valueType: "text"
		},
		{
			title: <FormattedMessage id="system.dict.data.dict_type" defaultMessage="字典类型" />,
			dataIndex: "dictType",
			valueType: "select",
			hideInTable: true,
			valueEnum: dictTypeOptions,
			search: {
				transform: value => {
					setDictType(value);
					return value;
				}
			}
		},
		{
			title: <FormattedMessage id="system.dict.data.dict_value" defaultMessage="字典键值" />,
			dataIndex: "dictValue",
			valueType: "text"
		},
		{
			title: <FormattedMessage id="system.dict.data.dict_sort" defaultMessage="字典排序" />,
			dataIndex: "sort",
			valueType: "text"
		},
		// {
		//   title: <FormattedMessage id="system.dict.data.status" defaultMessage="状态" />,
		//   dataIndex: 'status',
		//   valueType: 'select',
		//   valueEnum: statusOptions,
		//   render: (_, record) => {
		//     return <DictTag enums={statusOptions} value={record.status} />;
		//   },
		// },
		{
			title: <FormattedMessage id="system.dict.data.remark" defaultMessage="备注" />,
			dataIndex: "remark",
			valueType: "textarea",
			hideInSearch: true
		},
		{
			title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
			dataIndex: "option",
			width: "120px",
			valueType: "option",
			render: (_, record) => [
				<Button
					type="link"
					size="small"
					key="edit"
					hidden={!access.hasPerms("system:data:edit")}
					onClick={() => {
						// setModalVisible(true);
						// setCurrentRow(record);
					}}
				>
					编辑
				</Button>,
				<Button
					type="link"
					size="small"
					danger
					key="batchRemove"
					hidden={!access.hasPerms("system:data:remove")}
					onClick={async () => {
						// Modal.confirm({
						//   title: '删除',
						//   content: '确定删除该项吗？',
						//   okText: '确认',
						//   cancelText: '取消',
						//   onOk: async () => {
						//     const success = await handleRemoveOne(record);
						//     if (success) {
						//       if (actionRef.current) {
						//         actionRef.current.reload();
						//       }
						//     }
						//   },
						// });
					}}
				>
					删除
				</Button>
			]
		}
	];

	return (
		<PageContainer>
			<div style={{ width: "100%", float: "right" }}>
				<ProTable<API.System.DictDataVo>
					headerTitle={intl.formatMessage({
						id: "pages.searchTable.title",
						defaultMessage: "信息"
					})}
					actionRef={actionRef}
					formRef={formTableRef}
					rowKey="dictCode"
					key="dataList"
					pagination={{
						defaultPageSize: 10,
						showQuickJumper: true,
						showSizeChanger: true
					}}
					search={{
						labelWidth: 120
					}}
					request={
						params => {
							return {};
						}
						// getDictDataList({ ...params, dictType } as API.System.DictDataListParams).then(
						//   (res) => {
						//     // const result = {
						//     //   data: res.rows,
						//     //   total: res.total,
						//     //   success: true,
						//     // };
						//     return result;
						//   },
						// )
					}
					columns={columns}
					rowSelection={{
						onChange: (_, selectedRows) => {
							setSelectedRows(selectedRows);
						}
					}}
				/>
			</div>
		</PageContainer>
	);
};

export default DictDataTableList;
